<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      @gobackTriser="goBack"
      :back="back"
    ></topTitle>
    <div class="mainCon">
      <el-row>
        <el-col :span="24">
          <div class="patrolTitle">巡查情况</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="secondLevelTitleStyle">巡查项目信息</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">项目名称：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">项目地址：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">施工方：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">建设方：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">投资类型：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">所属行业：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">项目负责人：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">联系方式：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="secondLevelTitleStyle">巡查登记</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">巡查日期：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">巡查人员：</span>
          <span class="information">
            <el-input :disabled="true"></el-input>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="leftShow">
          <span class="labelWidth">巡查内容：</span>
          <span style="margin-left: 200px; display: block">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              highlight-current-row
              stripe
              style="border: 1px solid #dfe6ec"
            >
              <el-table-column
                align="center"
                prop="typeName"
                label="事项类型"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="itemName"
                label="巡查项"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="resultType"
                label="巡查结果"
              >
                <template slot-scope="scope">
                  <div>
                    <template v-if="scope.row.resultType == 'TEXT'">
                      <el-input
                        placeholder="请输入文本"
                        class="inputWidth"
                      ></el-input>
                    </template>
                    <template
                      v-else-if="scope.row.resultType == 'SINGLE_CHOOSE'"
                    >
                      <el-radio-group>
                        <el-radio
                          :label="item"
                          v-for="(item, index) of scope.row.value"
                          :key="index"
                        ></el-radio>
                      </el-radio-group>
                    </template>
                    <template
                      v-else-if="scope.row.resultType == 'MULTIPLE_CHOOSE'"
                    >
                      <el-checkbox-group :disabled="true">
                        <el-checkbox
                          :label="item"
                          v-for="(item, index) of scope.row.value"
                          :key="index"
                          >{{ item }}</el-checkbox
                        >
                      </el-checkbox-group>
                    </template>
                    <template v-if="scope.row.resultType == 'POPULATION'">
                      <el-input
                        :disabled="true"
                        placeholder="请输入人数"
                        class="inputWidth"
                      ></el-input
                      >&nbsp;人
                    </template>
                    <template v-if="scope.row.resultType == 'PERCENTAGE'">
                      <el-input
                        :disabled="true"
                        placeholder="请输入比例数"
                        class="inputWidth"
                      ></el-input
                      >&nbsp;%
                    </template>
                    <template v-if="scope.row.resultType == 'MONEY'">
                      <el-input
                        :disabled="true"
                        placeholder="请输入金额"
                        class="inputWidth"
                      ></el-input
                      >&nbsp;元
                    </template>
                    <template v-if="scope.row.resultType == 'AMOUNT'">
                      <el-input
                        :disabled="true"
                        placeholder="请输入数量"
                        class="inputWidth"
                      ></el-input
                      >&nbsp;个
                    </template>
                    <template v-if="scope.row.resultType == 'DAYS'">
                      <el-input
                        :disabled="true"
                        placeholder="请输入天数"
                        class="inputWidth"
                      ></el-input
                      >&nbsp;天
                    </template>
                    <template v-if="scope.row.resultType == 'HOURS'">
                      <el-input
                        :disabled="true"
                        placeholder="请输入小时数"
                        class="inputWidth"
                      ></el-input
                      >&nbsp;小时
                    </template>
                    <template v-else-if="scope.row.resultType == 'DATE'">
                      <el-date-picker
                        type="date"
                        placeholder="请选择日期"
                        class="inputWidth"
                        value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </template>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="凭证上传" width="200">
                <template slot-scope="scope">
                  <el-button class="uploadImg">上传</el-button>
                </template>
              </el-table-column>
            </el-table>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="secondLevelTitleStyle">巡查结果</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">巡查结果：</span>
          <span class="information">
            <el-select
              v-model="value"
              placeholder="请选择"
              class="inputWidth"
              clearable
            >
              <el-option label="存在问题，需整改" value="1"></el-option>
              <el-option label="无问题，无需整改" value="0"></el-option>
            </el-select>
          </span>
        </el-col>
        <el-col :span="12" class="leftShow">
          <span class="labelWidth">整改日期：</span>
          <span class="information">
            <el-date-picker
              type="date"
              placeholder="请选择"
              v-model="period"
              class="inputWidth"
              clearable
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="leftShow">
          <span class="labelWidth">存在问题：</span>
          <span class="information">
            <el-input
              style="padding-bottom: 40px"
              type="textarea"
              :rows="4"
              :disabled="true"
            ></el-input>
          </span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'patrolTemplateDetailJz',
  data() {
    return {
      titleText: '建筑巡查模板',
      back: true,
      tableData: [],
      value: '',
      period: '',
      page: '',
      templateInfo: [],
    }
  },
  created() {
    this.page = this.$route.query.page
    if (this.page === 'patrolTemplateAdd') {
      this.tableData = this.$route.query.selectItems
    } else {
      this.templateId = this.$route.query.templateId
      this.getTemplate(this.templateId)
    }
  },
  methods: {
    goBack() {
      if (this.page == 'patrolTemplateList') {
        this.$router.push('/home/patrolTemplate/patrolTemplateList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/patrolTemplate/patrolTemplateList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (this.page == 'patrolTemplateAdd') {
        this.$router.push('/home/patrolTemplate/patrolTemplateAdd')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/patrolTemplate/patrolTemplateList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    getTemplate(templateId) {
      if (!templateId) {
        return
      }
      this.axios({
        method: 'post',
        url: 'api-gov/ipqc/template/expand/detail',
        data: {
          id: templateId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.templateInfo = response.data.result
            this.tableData = response.data.result.ipqcTemplateDetailExpendVOs
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.btnChangeEnable = false
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
  padding: 24px;
}
.patrolTitle {
  color: #333;
  font: bold 16px Microsoft YaHei;
  height: 35px;
  border-bottom: 1px solid #dee5f4;
}
.leftShow {
  text-align: left;
  line-height: 36px;
  .labelWidth {
    font-size: 14px;
    color: #666666;
    display: inline-block;
    height: 36px;
    width: 200px;
    text-align: right;
    float: left;
  }
  .information {
    font-size: 14px;
    color: #151515;
    display: block;
    margin-left: 200px;
    height: 50px;
  }
  .selectWidth {
    width: 100%;
  }
  .uploadImg {
    width: 70px;
    height: 36px;
    color: #009588;
    border: 1px solid #009588;
    padding: 0;
  }
  .inputWidth {
    width: 65% !important;
  }
}
</style>
